<style scoped lang="less">
    .wrap{
		background:#F7F7F7;
		padding-bottom: 3.95rem;
		.banner{
			position: relative;
			.page{
				padding: 0 0.27rem;
				height: 0.53rem;
				line-height: 0.53rem;
				background: rgba(0,0,0,0.40);
				border-radius: 1.33rem;
				position: absolute;
				right: 0.32rem;
				bottom: 0.32rem;
				z-index: 5;
				color:rgba(255,255,255,0.88);
				font-size: 0.32rem;
			}
			.imgbox{
				height: 6.03rem;
				width: 10rem;
				display: flex;
				justify-content: center;
				align-items: center;
				img{
					display:block;
					max-width:100%;
					max-height: 100%;
				}
			}
		}
		
		.districtName{
			width: 5.33rem;
			height: 1.07rem;
			background-image: linear-gradient(-406deg, #FFAC12 0%, #FD5286 100%);
			box-shadow: 0.11rem 0.11rem 0.16rem 0 rgba(220,128,107,0.30);
			border-radius: 1.33rem;
			font-size: 0.48rem;
			text-align: center;
			line-height: 1.07rem;
			display: block;
			margin:0 auto;
			margin-top:-0.69rem;
			position: relative;
			z-index: 2;
			color:#fff;
		}
		//名人传记
		.biography{
			margin-top:0.16rem;
			padding-left:0.32rem;
			.blogtitle{
				height:0.53rem;
				line-height: 0.53rem;
				.titleleft{
					float:left;
					font-size: 0.43rem;
					color: #2C2C2C;
					letter-spacing: 0.34px;
					span{
						display: inline-block;
						width:0.13rem;
						height:0.53rem;
						background-image: linear-gradient(-145deg, #FFAC12 0%, #FD5286 100%);
						border-radius:1.33rem;
						vertical-align: middle;
						margin-right:0.27rem;
						overflow: hidden;
					}
				}
				.titleright{
					float:right;
					font-size:0.32rem;
					color: #6D6D6D;
					margin-right: 0.32rem;
					a{
						color: #6D6D6D;
					}
				}
			}
			.swiperblog{
				margin-top:0.4rem;
				.blogimgbox{
					height:5.33rem;
					display: flex;
					justify-content: center;
					align-items: center;
					img{ 
						max-width: 100%;
						max-height: 100%;
					}
				}
				p{
					height:1.07rem;
					line-height: 1.07rem;
					font-size: 0.37rem;
				}
				
			}
		}
		.notInfo{
			text-align: center;
			img{
				width: 3.73rem;
				height: 3.73rem;
				margin-top: 3.57rem;
			}
			p{
				line-height: 0.64rem;
				color: #999999;
				font-size: 0.35rem;
			}
		}
		//底部定位
		.fixedbottom{
			width:100%;
			margin-top:.4rem;
			height:3.95rem;
			position:fixed;
			bottom: 0;
			left: 0;
			z-index: 3;
			background: #fff;
			padding-top: 0.43rem;
			border-top:0.03rem solid #F5E7E7;
			.bottomimgbox{
				height:2.19rem;
				// display: flex;
				// justify-content: center;
				// align-items: center;
				img{
					width:100%;
					height:100%;
				}
			}
			p{
				height: 0.69rem;
				color: #2C2C2C;
				border-radius:0.03rem;
				font-size: 0.32rem;
				text-align: center;
				line-height: 0.69rem;
			}
			.fiveSwiper-next{
				background: url("../../images/blogright.png") no-repeat;
				position: absolute;
				right: 0;
				top:50%;
				margin-top:-0.53rem;
				width: 1.09rem;
				height: 1.07rem;
				z-index: 2;
				background-size: 100% 100%;
			}
			.fiveSwiper-prev{
				
				background: url("../../images/blogleft.png") no-repeat;
				position: absolute;
				left: 0;
				top:50%;
				width: 1.09rem;
				height: 1.07rem;
				z-index: 2;
				margin-top:-0.53rem;
				background-size: 100% 100%;
			}
		}
    }
</style>
<style lang="less">
	//后台读过来的HTML
	.textinfobox{
			margin:0.56rem 0.53rem 0;
			img{
				max-width: 100%!important;
    			height: auto!important;
			}
			video{
				max-width: 100%!important;
    			height: auto!important;
			}
		}
	.fixedbottom .swiper-container{
		overflow: initial!important;
		margin-left: 0.32rem;
	}
	.fixedbottom .swiper-slide .bottomimgbox{
		padding:0.03rem;
	}
	.fixedbottom .swiper-slide-active{
	
		
	}
	.fixedbottom{
		.fixedbottomActive{
			background-image: linear-gradient(-145deg, #FFAC12 0%, #FD5286 100%);
			border-radius:0.1rem;
			p{
				color:#fff!important;
			}
			i{

				background: url("../../images/xiaoicon.png") no-repeat;
				background-size: 100% 100%;
				position: absolute;
				display: none;
				width:0.53rem;
				height:0.53rem;
				top:-0.41rem;
				left:50%;
				margin-left:-0.27rem;
			}
		}
	}
</style>

<template>
<div class="wrap">
	<div v-if="cemeteryDistrict.id != '' && otherCemeteryDistrictList.length != 0 && contentFLg ">
		<div class="banner">
			<swiper :options="swiperOption" ref="swiperOptionRef">
				<!-- 幻灯内容 -->
				<swiper-slide v-for="(items,index) in carouselPicture">								
					<div class="imgbox"><img :src="imgurl+items"></div>							
				</swiper-slide>
			</swiper>
			<p class="page">
				<span>{{ activeIndex }}</span> / {{ carouselPicture.length }}
			</p>
		</div>
		<div v-text=" cemeteryDistrict.cemeteryDistrictName " class="districtName" :data-text="cemeteryDistrict.cemeteryDistrictName"></div>
		<div class="textinfobox">
			<div v-if="cemeteryDistrict.parkProfileType==1" v-html="cemeteryDistrict.parkProfileText"></div>
			<div v-else>
				<img :src="imgurl+cemeteryDistrict.parkProfilePic" alt="">
			</div>
		</div>
		<div class="biography" v-if="cemeteryDistrictOwnerList.length!=0">
			<div class="clearfix blogtitle">
				<p class="titleleft"><span></span>名人传记</p>
				<p class="titleright"><router-link :to="{ path: 'biographyList', query: { qrCode: qrCode }}" target="_blank">查看所有></router-link></p>
				
			</div>
			<div class="swiperblog">
				<swiper :options="swiperbiography">
					<!-- 幻灯内容 -->
					<swiper-slide v-for="(items,index) in cemeteryDistrictOwnerList" >								
						<div class="blogimgbox" @click="goZj(items.cemeteryQrCode)">
							<img :src="imgurl+items.cemeteryAvatar">
						</div>
						<p v-text="items.cemeteryName" @click="goZj(items.cemeteryQrCode)"></p>
								
					</swiper-slide>
				</swiper>
				
			</div>
		</div>
	</div>
	<!-- 缺省页面 -->
	<div v-if="cemeteryDistrict.id == '' && otherCemeteryDistrictList.length != 0 " class="notInfo">
		<img src="../../images/notzj.png" alt="">
		<p>该园区暂无数据</p>
	</div>
	<!-- 底部园区列表 -->
	<div class="fixedbottom" v-show="otherCemeteryDistrictList.length != 0">
		<swiper :options="swipercemetery" ref="mySwiperA">
			<!-- 幻灯内容 -->
			<swiper-slide v-for="(items,index) in otherCemeteryDistrictList" :class="pageindex == index ? 'fixedbottomActive':''" >								
				<div class="bottomimgbox" @click.stop="chooseYq(index,items.cemeteryId)">
					<img :src="items.carouselPicture?imgurl + items.carouselPicture:require('../../images/blank7.png') ">
				</div>
				<p v-text="items.cemeteryDistrictName"></p>
				<i></i>				
			</swiper-slide>
		</swiper>
		<!-- 左右箭头 -->
		<div class="fiveSwiper-next" @click="chooseYqNext"></div>
		<div class="fiveSwiper-prev" @click="chooseYqPre"></div>
	</div>
	<!-- 整个页面的缺省页面 -->
	<div v-show="otherCemeteryDistrictList.length == 0" class="notInfo">
		<img src="../../images/notzj.png" alt="">
		<p>陵园尚未开放该功能</p>
	</div>

</div>
	
</template>
<script>
    import { mapState } from 'vuex'
	import { swiper, swiperSlide } from 'vue-awesome-swiper'
    import global from '../../config/global'
	//.substring(0,substrtext.journeyLength)}}{{rstext.eventContent.length>substrtext.journeyLength?'...':''   字数限制
    import '../../js/flexible.debug.js'
    export default {
		data() {
			return {
				activeIndex:1,
				swiperbiography:{
					slidesPerView:2.5,
					spaceBetween:15,
	                slidesPerColumnFill : 'column',
	                debugger: false,
	                onTransitionStart(swiper){
	                }
				},
				swipercemetery:{
				   slidesPerView:3,
				   spaceBetween:8,
				   initialSlide :0,
                   slidesPerColumnFill : 'column',
                   debugger: false,
					nextButton: '.fiveSwiper-next',
					prevButton: '.fiveSwiper-prev',
				},
				imgurl:global.imgurl,
				parkQrCode:"",
				cemeteryDistrictOwnerList:{},//人物传记幻灯片
				carouselPicture:[],//头部幻灯片图片集合
				cemeteryDistrict:{},
				otherCemeteryDistrictList:{},//底部滑动幻灯片
				qrCode:"",
				rowNo:1,
				pageindex:0,
				contentFLg:false,
			}
		},
		mounted(){
			// this.init()
		},
		components: {
			swiper, swiperSlide
		},
		created() {
			this.init()
		},
		watch: {
			// 如果路由有变化，会再次执行该方法
			//'$route':""
		},
        computed: mapState({ user: state => state.user }),
		methods:{
			init(parkQrCode,rowNo,cemeteryId){
				var this_ = this;
				this.swiperOption = {
					slidesPerView:1,
                    slidesPerColumn: 1,
					autoplay:2000,
					autoplayDisableOnInteraction:false,										
					onSlideChangeStart(swiper){
						this_.activeIndex = swiper.activeIndex + 1;
					}
				}
				this.qrCode = this.$route.query.qrCode;
				this.rowNo = rowNo?rowNo:1;
				this.parkQrCode = parkQrCode ? parkQrCode : "";
				this_.contentFLg = false;
				this.$http.get(global.host+'/unsecured/mobile/cemeteryDistrict?qrCode='+this.$route.query.qrCode+'&parkQrCode='+this.parkQrCode+'&rowNo='+this.rowNo+'&cemeteryId='+(cemeteryId ? cemeteryId :'')+'&source='+(cemeteryId?2:1))
					.then((response) => {
						if(response.body.status == 1){
							this_.contentFLg = true;
							this.otherCemeteryDistrictList = response.data.otherCemeteryDistrictList;//现获取底部数据列表							
							this.cemeteryDistrict=response.data.cemeteryDistrict;
							if(this.cemeteryDistrict.id == ''){//如果ID为空 改园区无数据
								return;
							}	
							this.carouselPicture = this.cemeteryDistrict.carouselPicture ? this.cemeteryDistrict.carouselPicture.split(",") :'';
							this.cemeteryDistrictOwnerList = response.data.cemeteryDistrictOwnerList;
							this.pageindex = this.cemeteryDistrict.rowNo-1;
							//每次切换数据 需把顶部轮播展示图初始化
							this_.activeIndex = 1;		
							if(parkQrCode){
								this.$refs.swiperOptionRef.swiper.slideTo(0);								
							}												
							document.body.scrollTop = 0;
            				document.documentElement.scrollTop = 0;
							
						}else{
							//接口出问题跳转异常页面
							this.$router.push({ path: '/interfaceException'});
						}
						
					})
					.catch(function (response) {
						
					})

			},
			goZj(hid){
				this.$router.push({ path: '/cmt',query:{"hid":hid}});
			},
			chooseYq(index,cemeteryId){
				//选择园区 index-下标
				this.pageindex = index;
				this.init(this.otherCemeteryDistrictList[index].qrcode,this.otherCemeteryDistrictList[index].rowNo,cemeteryId)
			},
			chooseYqNext(){
				if(this.pageindex + 1 == this.otherCemeteryDistrictList.length){
					console.log('最后一个数据了');
					return;
				}
				this.pageindex = this.pageindex + 1;

				this.init(this.otherCemeteryDistrictList[this.pageindex].qrcode,this.otherCemeteryDistrictList[this.pageindex].rowNo,this.otherCemeteryDistrictList[this.pageindex].cemeteryId)
			},
			chooseYqPre(){
				if(this.pageindex  == 0){
					console.log('第一个数据了');
					return;
				}
				this.pageindex = this.pageindex - 1;
				this.init(this.otherCemeteryDistrictList[this.pageindex].qrcode,this.otherCemeteryDistrictList[this.pageindex].rowNo,this.otherCemeteryDistrictList[this.pageindex].cemeteryId)
			}

		},
		
		
    }
</script>